import type { ObjectDirective, ShallowReactive } from 'vue'

export interface ModuleInfo {
  id: number
  name: string
  svg: string
}

export interface ModuleSlot {
  module?: ModuleInfo
  id: number
  style: string
}

export const enum DragType {
  ModuleSource = 'module-source',
  ModuleSlot = 'module-slot',
  ModuleSourceContainer = 'module-source-container'
}

export interface DragMeta {
  moduleSourceList: ModuleInfo[]
  moduleSlots: ModuleSlot[]
}
export type HandlerBindData = ShallowReactive<DragMeta>
export type VModuleDrag = ObjectDirective<HTMLElement, HandlerBindData>

export type DragEventHandler = (event: DragEvent, value: HandlerBindData) => any
export type DragEvents =
  | 'drag'
  | 'dragstart'
  | 'dragenter'
  | 'dragover'
  | 'dragleave'
  | 'drop'
  | 'dragend'
export type HandlerObject = Partial<Record<DragEvents, DragEventHandler>>

export type DebuggerInfo = [level: 'WARN' | 'SUCCESS' | 'INFO' | 'ERROR', string][]
